<template>
	<view class="content">
		<view class="box">
			<view class="flex-cb">
				<text>人脸录入</text>
				<image v-if="userInfo.faceUrl" :src="userInfo.faceUrl" @click="previewImages" class="touxian"></image>
				<view v-else class="txDiv" @click="previewImages">+</view>
			</view>
			<view class="flex-cb">
				<text>姓名</text>
				<text>{{ userInfo.name || '' }}</text>
			</view>
			<view class="flex-cb">
				<text>手机号</text>
				<text>{{ userInfo.phone || '' }}</text>
			</view>
			<view class="flex-cb">
				<text>二维码</text>
				<image :src="url" @click="yulan"></image>
			</view>
		</view>
		<view class="foot"><view @click="xyTJ" class="tjbtn">退出登录</view></view>
		<canvas class="canvas" canvas-id="canvas" @click="save"></canvas>
	</view>
</template>

<script>
import { checkUrl } from '@/utils/common';
import { baseUrl } from '@/utils/config';
import QRCode from '@/utils/webapp-qrcode'
export default {
	data() {
		return {
			userInfo: {},
			url: '',
			ScreenBrightness: '',
			name: ''
		};
	},
	onLoad() {
		this.memberInformation();
	},
	methods: {
		// 获取会员信息
		memberInformation() {
			this.$app.ajax({
				data: {
					param: {
						userId: uni.getStorageSync('userId')
					}
				},
				api: this.$api.memberInformation()
			}).then((res) => {
				if (res.errorCode != '000000') return;
				let that = this;
				new QRCode('canvas', {
					text: res.record.code,
					width: 150,
					height: 150,
					padding: 12,
					correctLevel: QRCode.CorrectLevel.L,
					callback: ss => {
						this.url = ss.path
					}
				});
				this.userInfo = res.record
			});
		},
		yulan() {
			uni.previewImage({
				urls: [this.data.url]
			});
		},
		xyTJ() {
			console.log('退出登录');
			uni.removeStorageSync('userId');
			uni.removeStorageSync('nickName');
			uni.reLaunch({
				url: '/pages/login/login'
			});
		},
		previewImages: function() {
			let url = 'common/oss/uploadOss.do';
			let that = this;
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				success: fh => {
					const tempFilePaths = fh.tempFilePaths;
					for (let i = 0; i < tempFilePaths.length; i += 1) {
						uni.uploadFile({
							url: checkUrl(url) ? url : baseUrl + url,
							filePath: tempFilePaths[i],
							name: 'file',
							header: {
								// #ifdef MP
								'content-type': 'application/json', // 默认值
								// Cookie: uni.getStorageSync('cookie'),
								// #endif
								// #ifdef H5
								// #endif
								shopId: uni.getStorageSync('shopId'),
								platform: '3',
								folder: 'USER_IMG',
								token: uni.getStorageSync('cookie'),
								gymId: uni.getStorageSync('GYMID')
							},
							formData: {
								folder: 'USER_IMG',
								type: ''
							},
							success(res) {
								console.log(123, res)
								let userInfo = that.userInfo;
								userInfo.face = JSON.parse(res.data).insertUrl;
								userInfo.faceUrl = JSON.parse(res.data).showUrl;
								this.userInfo = userInfo
								// that.setData({ userInfo });
								that.editInfo();
							}
						});
					}
				}
			});
		},
		editInfo() {
			if (!this.userInfo.faceUrl) {
				return false;
			}
			this.$app.ajax({
				data: {
					param: {
						userId: uni.getStorageSync('userId'),
						...this.userInfo
					}
				},
				api: this.$api.editInfo()
			}).then((res) => {
				if (res.errorCode != '000000') return;
				this.memberInformation();
			});
		}
	}
};
</script>
<style>
	page {
		background: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
.flex-cb {
	font-size: 30rpx;
	padding: 30rpx 0;
	line-height: 30rpx;
	border-bottom: 1px solid #e5e5e5;
	color: #222222;
}

.flex-cb text:first-of-type {
	color: #666666;
}

.box {
	background-color: #fff;
	padding: 0 30rpx;
	box-sizing: border-box;
}

.flex-cb:last-of-type {
	border-bottom: none;
}

.flex-cb image {
	width: 120rpx;
	height: 120rpx;
}

.canvas {
	position: fixed;
	top: -100%;
	left: 0;
}

.tjbtn {
	width: 260rpx;
	line-height: 88rpx;
	background: #ffffff;
	border-radius: 50rpx;
	font-size: 30rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #333333;
	text-align: center;
}

.foot {
	padding: 30rpx;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
}

.txDiv {
	width: 120rpx;
	height: 120rpx;
	background: #f7f7f7;
	border-radius: 8rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
